<template>
	<view>
		<view class="tuichu">
			<text class="tuichu" @click="retrieve">退出登录</text>
		</view>
		<view class="top-box">
			<view class="level">
				<uni-icons type="auth-filled" class="avatar-example" size="150"></uni-icons>
				<view class="account">{{ userData.username }}</view>
			</view>
		</view>
		<view class="box">
			<view class="nav-box">
				<view v-for="(item, index) in navList" :key="index" class="nav" @click="navClick(index)">
					<text class="gray">{{ item.title }}</text>
				</view>
			</view>
			<view class="level row" style="margin-top: 8px">
				<view class="left">用户名:</view>
				<input type="text" v-model="userData.username" />
			</view>
			<view class="level row">
				<view class="left">密码:</view>
				<input type="password" v-model="userData.password" />
			</view>
			<view class="level row">
				<view class="left">电话:</view>
				<input type="text" v-model="userData.phone" />
			</view>
			<view class="level row">
				<view class="left">邮箱:</view>
				<input type="text" v-model="userData.email" />
			</view>
			<button type="primary" style="width: 40%; margin-top: 30px; border-radius: 10px" @click="passwordModal">确认修改</button>

			<view class="modal" v-show="modalShow">
				<view class="modal-content">
					<view class="input2">
						<view class="table-cell"><input class="input1" v-model="searchKeyword" placeholder="请输入搜索内容" /></view>
						<view class="table-cell"><button class="sousuo1" @click="searchInput">搜索</button></view>
					</view>
					<view class="table">
						<view class="table-row">
							<view class="table-cell">订单</view>
							<view class="table-cell">评论</view>
							<view class="table-cell">发布时间</view>
							<view class="table-cell">评分</view>
						</view>
						<view class="table-row" v-for="(item, index) in tableData" :key="index" v-if="!item.hidden">
							<view class="table-cell">{{ item.orderId }}</view>
							<view class="table-cell">{{ item.content }}</view>
							<view class="table-cell">{{ item.createdAt }}</view>
							<view class="table-cell">{{ item.remark }}</view>
						</view>
					</view>
					<button @click="hideModal">确定</button>
				</view>
			</view>
			<view class="modal" v-show="passwordmodal">
				<view class="modal-content1">
					<view class="input2">
						<view class="table-cell"><input class="input3" v-model="old_password1" type="password" placeholder="请再次输入密码进行身份验证" /></view>
						<view class="table-cell"><button class="sousuo1" @click="ensurePassword">验证</button></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import uniIcons from '../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue';
export default {
	components: {
		uniIcons 
	},
	data() {
		return {
			passwordmodal: false,
			old_password: null,
			old_password1: null,
			userData: {
				userId: null,
				username: null,
				password: null,
				phone: null,
				email: null
			},
			modalShow: false,
			tableData: [],
			searchKeyword: null,
			navList: [
				{
					index: 1,
					title: '购物车'
				},
				{
					index: 2,
					title: '我的订单'
				},
				{
					index: 3,
					title: '我的评价'
				}
			]
		};
	},
	onShow() {
		this.userData.username = uni.getStorageSync('username');
		console.log(this.userData.username); // 输出存储的用户名
		uni.request({
			method: 'GET',
			url: `http://localhost:8080/user/selectUserByUsername?username=${this.userData.username}`, // 替换为实际的API地址
			success: (res) => {
				if (res.statusCode === 200) {
					this.userData = res.data.data; 
					console.log(res.data.data.password);
					this.old_password = res.data.data.password;
					uni.setStorageSync('userId', res.data.data.userId);
				} else {
					uni.showToast({
						title: '请求失败，状态码：' + res.statusCode,
						icon: 'none'
					});
				}
			},
			fail: (error) => {
				console.error('请求失败', error);
			}
		});
	},
	methods: {
		retrieve() {
			setTimeout(function () {
				// 跳转至登录页面
				uni.navigateTo({
					url: '/pages/login/login'
				});
			}, 500);
		},
		navClick(index) {
			console.log(index);
			if (index == 0) {
				uni.switchTab({
					url: '/pages/shopping cart/shopping cart' // 确保路径正确
				});
			} else if (index == 1) {
				uni.switchTab({
					url: '/pages/orders/unfinished/unfinished' // 确保路径正确
				});
			} else if (index == 2) {
				this.fetchData();
				this.modalShow = true;
			}
		},
		// 请求用户数据
		fetchData() {
			uni.request({
				method: 'GET',
				url: `http://localhost:8080/review/getReviewsByUsername?username=${this.userData.username}`, // 替换为实际的API地址
				success: (res) => {
					if (res.statusCode === 200) {
						this.tableData = res.data.data;
					} else {
						uni.showToast({
							title: '请求失败，状态码：' + res.statusCode,
							icon: 'none'
						});
					}
				},
				fail: (err) => {
					console.error('请求失败', err);
				}
			});
		},
		hideModal() {
			this.modalShow = false;
		},
		passwordModal() {
			if (this.validateEmail(this.userData.email)) {
			} else {
				uni.showToast({
					title: '邮箱格式不正确！',
					icon: 'none'
				});
				return;
			}
			if (this.isPhoneNumberValid(this.userData.phone)) {
			} else {
				uni.showToast({
					title: '电话号码格式不正确！',
					icon: 'none'
				});
				return;
			}
			this.passwordmodal = true;
		},
		ensurePassword() {
			console.log(this.old_password1 + this.old_password);
			if (this.old_password1 === this.old_password) {
				this.updateUser();
				this.passwordmodal = false;
				uni.showToast({
					title: '数据修改成功！',
					icon: 'none'
				});
			} else {
				this.passwordmodal = false;
				uni.showToast({
					title: '验证失败！',
					icon: 'none'
				});
			}
		},
		//对用户的数据进行模糊查询
		searchInput() {
			console.log(this.searchKeyword);
			uni.request({
				method: 'GET',
				url: 'http://localhost:8080/review/findReviewByReviewId', // 替换为实际的API地址
				data: {
					username: this.userData.username, // 参数1的值
					value: this.searchKeyword // 参数2的值，直接使用this访问
				},
				success: (res) => {
					if (res.statusCode === 200) {
						this.tableData = res.data.data;
					} else {
						uni.showToast({
							title: '请求失败，状态码：' + res.statusCode,
							icon: 'none'
						});
					}
				},
				fail: (err) => {
					console.error('请求失败', err);
				}
			});
		},
		validateEmail(email) {
			const regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
			return regex.test(email);
		},
		isPhoneNumberValid(phoneNumber) {
			const regex = /^\d{11}$/;
			return regex.test(phoneNumber);
		},
		//更新用户数据
		updateUser() {
			uni.request({
				method: 'POST',
				url: 'http://localhost:8080/user/updateUser',
				data: this.userData, 
				header: {
					'content-type': 'application/json'
				},
				success: (res) => {
					if (res.data.data === true) {
						uni.showToast({
							title: '修改成功'
						});
						uni.setStorageSync('username', this.userData.username);
					} else {
						uni.showToast({
							title: '修改失败',
							icon: 'none'
						});
					}
				},
				fail: (err) => {
					console.error('请求失败', err);
				}
			});
		}
	}
};
</script>

<style>
.top-box {
	position: relative;
	padding: 100rpx 20rpx;
	height: 100rpx;
}
.level {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	align-items: center;
}

.avatar-example {
	margin-right: 15rpx;
}

.account {
	margin-left: 10rpx;
	font-size: 50rpx;
	color: #303133;
}

.box {
	border-top-left-radius: 50rpx;
	border-top-right-radius: 50rpx;
	background-color: white;
	margin-top: 0rpx;
	padding: 20rpx;
}

.title {
	font-size: 30rpx;
	font-weight: bold;
	margin: 20rpx 10rpx;
}

.tip {
	font-size: 28rpx;
	color: gray;
	margin: 10rpx;
}

/* 菜单栏 */
.nav-box {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding-bottom: 20rpx;
	border-bottom: 1rpx solid #bcbcc2;
	border-radius: 5px;
	box-shadow: 2px 2px 1px 0px rgba(0, 0, 0, 0.15);
}

.nav {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
	border-left: 1rpx solid #f4f4f5;
	padding: 10rpx 0;
}

.nav:first-child {
	border-left: 1rpx solid transparent;
}

.gray {
	margin-top: 10rpx;
	font-size: 30rpx;
	color: #82848a;
}
.tuichu {
	margin-top: 10rpx;
	margin-left: 300rpx;
	font-size: 30rpx;
	color: #82848a;
}

.row {
	padding: 20rpx 30rpx;
	margin-bottom: 10px;
	justify-content: space-between;
	border-bottom: 1px solid rgb(218, 213, 213);
}

.left {
	font-size: 30rpx;
	color: #303133;
	margin-left: 120rpx;
}

.button-example {
	margin-top: 25rpx;
	display: flex;
	margin-right: 30rpx;
}

/* 模态框样式 */
.modal {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	/* 半透明背景 */
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
}

/* 模态框内容样式 */
.modal-content {
	background-color: #ffffff;
	border-radius: 10px;
	width: 100%;
	max-width: 500px;
	/* 最大宽度 */
	padding: 20px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	/* 添加阴影 */
	position: relative;
}
/* 模态框内容样式 */
.modal-content1 {
	background-color: #ffffff;
	border-radius: 10px;
	width: 65%;
	max-width: 500px;
	/* 最大宽度 */
	padding: 20px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	/* 添加阴影 */
	position: relative;
}

/* 搜索框样式 */
.input1 {
	width: 480rpx;
	height: 30px;
	font-size: 15px;
	margin-bottom: 10px;
	border-bottom: 1px solid rgb(218, 213, 213);
}
/* 搜索框样式 */
.input3 {
	width: 300rpx;
	height: 30px;
	font-size: 15px;
	margin-bottom: 10px;
}
.input2 {
	width: 100%;
	height: 60px;
	display: flex; /* 开启 Flexbox 布局 */
	justify-content: space-between; /* 两端对齐 */
}

.sousuo1 {
	width: 160rpx;
	height: 30px;
	font-size: 13px;
	border-radius: 5px;
	margin-bottom: 10px;
}

/* 表格样式 */
.table {
	width: 100%;
	border-collapse: collapse;
	/* 合并边框 */
	margin-bottom: 20px;
	font-size: 15px;
}

.table-row {
	display: table-row;
}

.table-cell {
	display: table-cell;
	padding: 8px 2px;
	border-bottom: 1px solid #eee;
	text-align: left;
	vertical-align: top;
}

/* 表格标题 */
.table .table-row:first-child .table-cell {
	background-color: #f7f7f7;
	font-weight: bold;
}

/* 模态框按钮样式 */
.modal-buttons {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	/* 按钮之间的间隔 */
	margin-top: 10px;
}

.modal-buttons button {
	padding: 8px 15px;
	border: none;
	border-radius: 4px;
	background-color: #409eff;
	/* 按钮背景色 */
	color: white;
	cursor: pointer;
	transition: background-color 0.3s;
}

.modal-buttons button:hover {
	background-color: #337ecc;
	/* 鼠标悬浮时按钮背景色变深 */
}
</style>
